<template>
  <div>
    <!-- 引入阿里云播放器，普通视频 + 地址播放（不使用阿里云播放器，也可以进行播放！！！！） -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.12.1/skins/default/aliplayer-min.css"/>
    <script charset="utf-8" type="text/javascript"
            src="https://g.alicdn.com/de/prismplayer/2.12.1/aliplayer-min.js"></script>
    <!-- 阿里云播放视频窗口 -->
    <div class="prism-player" id="J_prismPlayer" ></div>
  </div>
</template>

<script>

  import vod from "../../api/vod";

  export default {
    layout: 'video',
    // 异步获取到路由参数
    asyncData({params, error}) {
      return {vid: params.vid}
    },
    // 创建 playAuth 值，用于保存获取到的 播放凭证
    data() {
      return {
        playAuth: ""
      }
    }
    ,
    methods: {
      getVoid() {
        vod.getPlayAuth(this.vid).then(res => {
          this.playAuth = res.data.playAuth

          // 创建视频播放对象
          const player = new Aliplayer({
              id: 'J_prismPlayer',     // 设置视频播放窗口 id
              width: '100%',            // 设置播放器宽度
              height: '500px',
              autoplay: false,        // 是否自动进行播放
              // 视频未播放时的封面
              cover: "http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png",
              encryptType: '1',                // 如果是加密视频，则需要设置 encryptType 为 1，非加密视频，则无需设置
              vid: this.vid,        // 必选参数。音视频ID
              playauth: this.playAuth,   // 必选参数。音视频播放凭证
            },
            function (player) {
              console.log("视频播放器创建好了");
            });
        })
      }
    },
    mounted() {
      // 获取到 视频播放凭证
      this.getVoid()
    }
  }
</script>

<style scoped>

</style>
